<template>
  <div class="channel-zj">
    <van-pull-refresh
      v-model="isLoading"
      :success-text="successtext"
      success-duration="1000"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- <van-cell v-for="(item, i) in list" :key="i" :title="item.title">
        </van-cell> -->
        <artivleitem
          v-for="(item, i) in list"
          :key="i"
          :article="item"
        ></artivleitem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticle } from "@/api/article";

// 引入文章列表项组件
import artivleitem from "@/components/article-item";

export default {
  // 组件名称
  name: "channelzj",
  // 组件参数 接收来自父组件的数据
  props: {
    channel: {
      type: Object,
      required: true,
    },
  },
  // 局部注册的组件
  components: {
    artivleitem,
  },
  // 组件状态值
  data() {
    return {
      list: [], //存储列表数组
      loading: false, //控制加载中状态
      finished: false, //控制加载结束的状态
      nextStamp: null, //获取时间戳
      error: false, //列表数据加载失败后触发
      isLoading: false, //下拉刷新
      successtext: "刷新成功",
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 渲染页面的事件
    async onLoad() {
      try {
        // 1.请求获取数据
        const { data } = await getArticle({
          channel_id: this.channel.id, //频道id
          timestamp: this.nextStamp || Date.now(), //时间戳
          with_top: 1,
        });

        // 随机报错
        if (Math.random() > 0.8) {
          JSON.parse("QWER");
        }

        const results = data.data.results;
        // 2.将data放入list数组中
        this.list.push(...results);

        // 3.本次数据加载结束之后要把加载状态设置为结束
        this.loading = false;

        // 4.判断数据加载是否完成
        if (results.length) {
          // 获取下一页数据的时间戳
          this.nextStamp = data.data.pre_timestamp;
        } else {
          // 没有数据将finished设置为true
          this.finished = true;
        }
      } catch (err) {
        this.error = true;
        this.loading = false;
      }
    },

    // 下拉刷新的事件
    async onRefresh() {
      try {
        // 1.请求获取数据
        const { data } = await getArticle({
          channel_id: this.channel.id, //频道id
          timestamp: Date.now(), //每次刷新的时间戳都应该是最新的
          with_top: 1,
        });

        // 随机报错
        if (Math.random() > 0.9) {
          JSON.parse("QWER");
        }

        // 2.将data放入list数组中
        const results = data.data.results;
        this.list.unshift(...results);

        // 3.关闭下拉刷新状态
        this.isLoading = false;

        // 4.更改刷新成功后的文本
        this.successtext = `更新成功，更新了${results.length}条数据`;
      } catch (err) {
        // 关闭下拉刷新状态
        this.isLoading = false;
        // 更改刷新失败后的文本
        this.successtext = `更新失败，请稍后重试`;
      }
    },
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
};
</script>

<style scoped lang="less">
.channel-zj {
  height: 79vh;
  overflow-y: auto;
}
</style>
